<template>
  <div class="project">
    <BaseSectionInfo :baseInfo="baseInfo"></BaseSectionInfo>
    <div class="tabs">
      <div
        class="tabs-item"
        :class="{ active: currentTab === index }"
        v-for="(item, index) in tabs"
        :key="item"
        @click="handleChangeTab(item, index)"
      >
        {{ item }}
      </div>
    </div>

    <div class="body" v-show="sectionList.length">
      <div class="body-left">
        <SectionInfo :sectionObj="sectionObj"></SectionInfo>
      </div>
      <div class="body-right">
        <el-radio-group v-model="tabPosition">
          <el-radio-button label="node"
            >推进节点</el-radio-button
          >
          <el-radio-button label="info"
            >进度信息</el-radio-button
          >
        </el-radio-group>

        <div
          class="project-part"
          v-show="tabPosition === 'node'"
        >
          <div class="project-part-title top">推进节点</div>
          <AdvanceNodeView
            :stageList="sectionObj.node"
          ></AdvanceNodeView>
        </div>

        <div
          class="project-part"
          v-show="tabPosition === 'info'"
        >
          <div class="project-part-title top">进度信息</div>
          <ProgressNodeInfo
            :isProgressEdit="isProgressEdit"
            :progressList="sectionObj.process"
          ></ProgressNodeInfo>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseSectionInfo from '../../components/baseSectionInfo.vue'
import SectionInfo from '../../components/sectionInfo.vue'
import ProgressNodeInfo from '../../components/progressNodeInfo.vue'
import AdvanceNodeView from '../../components/advanceNodeView.vue'

export default {
  components: {
    BaseSectionInfo,
    SectionInfo,
    AdvanceNodeView,
    ProgressNodeInfo
  },
  props: {
    baseInfo: Object,
    sectionList: Array
  },
  data() {
    return {
      currentTab: 0,
      tabs: [],
      tabPosition: 'node',
      sectionObj: {
        node: [],
        process: [],
        section: {}
      },
      isProgressEdit: false
    }
  },
  watch: {
    sectionList(val) {
      if (val.length) {
        this.tabs = val.map(
          (item) => item.section.simpleName
        )
        this.sectionObj = val[0]
      }
    }
  },
  methods: {
    handleChangeTab(item, index) {
      this.currentTab = index
      this.sectionObj = this.sectionList[index]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
.tabs {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #f1f1f1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  &-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #4c565c;
    position: relative;
    cursor: pointer;
    margin-right: 20px;

    &::before {
      position: absolute;
      content: ' ';
      right: 0;
      top: 19px;
      width: 1px;
      height: 12px;
      background: #d0d8e1;
    }
    &:last-child {
      &::before {
        display: none;
      }
    }
    &.active {
      color: #497fa3;
      &::after {
        position: absolute;
        content: ' ';
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 26px;
        height: 3px;
        background: #497fa3;
        border-radius: 2px;
      }
    }
  }
}

.body {
  display: flex;
  padding: 0 10px;

  &-left {
    width: 70%;
  }

  &-right {
    padding-left: 20px;
    flex: 1;
  }
}

.top {
  margin-top: 30px;
}
</style>
